<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Checkbox</title>
  <style type="text/css">
    .checkbox {
      display: block;
      width: 20px;
      height: 20px;
      margin: 8px;
      position: relative;
    }

    .checkbox input {
      display: none;
    }

    .checkbox input+i {
      display: block;
    }

    .checkbox input+i::before {
      content: ' ';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border: solid 2px #e9e9e9;
      border-radius: 3px;
      background: #fafafa;
      transition: all 0.2s;
    }

    .checkbox input:checked+i::before {
      background-color: #009900;
      border-color: #009900;
    }

    .checkbox input+i::after {
      content: ' ';
      position: absolute;
      width: 10px;
      height: 6px;
      top: 6px;
      left: 6px;
      border: solid 3px transparent;
      border-top: 0;
      border-right: 0;
      transform: rotate(-45deg);
      transition: all 0.2s;
    }

    .checkbox input:checked+i::after {
      border-color: #FFF;
    }
  </style>
</head>

<body>
  <fieldset>
    <legend>chekcbox</legend>
    <label class="checkbox">
      <input type="checkbox" checked>
      <i></i>
    </label>
    <label class="checkbox">
      <input type="checkbox">
      <i></i>
    </label>
  </fieldset>

</body>

</html>